<template>
    <span>
        <a :class="sign.btnClass" @click="isShow = true">{{ sign.text }}</a>
        <el-dialog width="470px" :append-to-body="true" :title="sign.title" :visible.sync="isShow" @open="open">
            <sign-form ref='signForm' :isSign="isSign" @close="close"></sign-form>
        </el-dialog>
    </span>
</template>

<script>
import SignForm from './SignForm'

export default {
    name: 'sign-in',
    components: { SignForm },
    props: {
        isSign: Number
    },
    data() {
        return {
            isShow: false
        }
    },
    computed: {
        sign() {
            return this.isSign === 0 ? {
                text: '立即登录',
                title: '登录',
                btnClass: { 'btn-signin': true }
            } : {
                text: '立即注册',
                title: '注册',
                btnClass: { 'btn-signup': true }
            }
        }
    },
    methods: {
        open() {
            this.$nextTick(() => {
                this.isSign === 0 ? this.$refs.signForm.$refs.loginFocus.focus() :this.$refs.signForm.$refs.registerFocus.focus()
            })
        },
        close() {
            this.$store.state.isLogin = false
            this.isShow = false
        }
    }
}
</script>

<style>
.el-dialog__title {
    font-size: 16px;
}
.el-dialog__header {
    box-shadow: 0 0 1px rgba(0,0,0,0.25);
}
.el-dialog__body {
    padding: 15px 110px 30px 110px;
}
.el-form--label-top .el-form-item__label {
    padding: 0;
}
.success {
    width: 100%;
    margin-left: 0 !important;
}
@media (max-width: 600px) {
    .el-dialog {
        width: 100% !important;
    }
    .el-dialog__body {
        padding: 15px;
    }
}
</style>

<style lang="scss" scoped>
$color: #42b983;
$deep-color: #009a61;
$size: 14px;
.btn-signin, .btn-signup {
    padding: 7px 12px;
    border-radius: 4px;
    font-size: $size;
}
.btn-signin {
    color: $color;
}
.btn-signin:hover {
    background-color: #f3f3f3;
}
.btn-signup {
    background: $color;
    color: #fff;
}
.btn-signup:hover {
    background: $deep-color;
}
</style>